<template>
	<div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal">
		<p v-for="keys in keyList">
			<template v-for="key in keys  ">
				<i v-if="key === 'top'" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i>
				<i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i>
				<i v-else-if="key === 'del'" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete"del</i>
				<!-- <a-icon v-else-if="key === 'del'" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete" type="rollback" /> -->
				<i v-else-if="key === 'blank'" @click.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i>
				<i v-else-if="key === 'symbol'" @click.stop="clickKey" class="tab-symbol">符</i>
				<i v-else-if="key === 'point'" @click.stop="clickKey" class="tab-point">·</i>
				<i v-else-if="key === 'enter'" @click.stop="clickKey" class="iconfont icon-huiche tab-enter"></i>
				<i v-else @click.stop="clickKey">{{key}}</i>
			</template>
		</p>
		<p v-show="isShow"><i @click="closeKeyBoard">确定</i></p>
	</div>
</template>
<script>
	import clickoutside from './keyword.js'
	export default {
		directives: {
			clickoutside
		},
		data() {
			return {
				keyList: [],
				status: 2, //0 小写 1 大写 2 数字 3 符号
				lowercase: [
					['1', '2', '3'],
					['4', '5', '6'],
					['7', '8', '9'],
					['.', '0', 'del'],
				],
				lowercase1:[
					['1', '2', '3'],
					['4', '5', '6'],
					['7', '8', '9'],
					[' ', '0', 'del'],
				],
				//equip:!!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)//是否是移动设备
			}
		},
		props: {
			option: {
				type: Object
			},
			optionIndex:{
				type:Number
			},
			isShow: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			showKeyboard() {
				return this.option.show
			}
		},
		mounted() {
			this.keyList = this.optionIndex == -1? this.lowercase:this.lowercase1
		},
		methods: {
			closeKeyBoard() {
				// this.option.show = false;
				this.$emit('submit');
			},
			tabHandle({
				value = ''
			}) {
				if (value.indexOf('tab-num') > -1) {
					this.status = 2
					//数字键盘数据
				} else if (value.indexOf('key-delete') > -1) {
					console.log(value.indexOf('key-delete'))
					this.emitValue('delete')
				} else if (value.indexOf('tab-blank') > -1) {
					this.emitValue(' ')
				} else if (value.indexOf('tab-enter') > -1) {
					this.emitValue('\n')
				} else if (value.indexOf('tab-point') > -1) {
					this.emitValue('.')
				} else if (value.indexOf('tab-symbol') > -1) {
					this.status = 3
				} else if (value.indexOf('tab-top') > -1) {
					if (this.status === 0) {
						this.status = 1
					} else {
						this.status = 0
						this.keyList =  this.optionIndex == -1? this.lowercase:this.lowercase1
					}
				} else {}
			},
			clickKey(event) {
				let value = event.srcElement.innerText || '';
				let id = event.srcElement.id;
				let target = event.srcElement ? event.srcElement : event.target;
				if (id !== '' && id === 'del') { //如果点击的是id为del的表示是删除
					this.emitValue(id);
				} else {
					value && id !== 'del' ? this.emitValue(value) : this.tabHandle(target.classList);
				}
			},
			emitValue(key) {
				this.$emit('keyVal', key, this.optionIndex)
			},
			closeModal(e) {
				if (e.target !== this.option.sourceDom) {
					// this.showKeyboard = false
					this.$emit('close', false)
				}
			}
		}
	}
</script>
<style scoped lang="less">
	.keyboard {
		display: inline-block;
		width: 500px;
		height: 400px;
		font-size: 18px;
		border-radius: 2px;
		// background-color: #fff;
		user-select: none;
		bottom: 0;
		position: absolute;
		/*定位数字键盘*/
		left: 50%;
		top: 77px;
		margin-left:-250px;
		z-index: 999;
		pointer-events: auto;

		p {
			width: 100%;
			margin: 0 auto;
			height: 42px;
			margin-bottom: 0.6em;
			display: flex;
			display: -webkit-box;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;

			i {
				display: block;
				margin: 2px 1px;
				height: 50px;
				line-height: 52px;
				font-style: normal;
				box-sizing: border-box;
				font-size: 24px;
				border-radius: 3px;
				width: 44px;
				background-color: #fff;
				text-align: center;
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 0;
				-webkit-box-flex: 1;
				color: #000;
				border:1px solid #ccc;

				&:active {
					background-color: #eee;
				}
			}

			.tab-top {
				width: 50px;
				margin: 0 1%;
				background: #cccdd0;
				color: #fff;
				font-size: 24px;
			}

			.key-delete {
				color: #fff;
			}

			.tab-num {
				font-size: 18px;
				background: #dedede;
				color: #5a5959;
			}

			.tab-point {
				width: 20px;
			}

			.tab-blank {
				width: 50px;
				font-size: 12px;
				padding: 0 15px;
				color: #5a5959;
				line-height: 60px;
			}

			.tab-symbol {
				width: 20px;
				font-size: 18px;
			}

			.tab-enter {
				font-size: 30px;
				line-height: 54px;
			}

			&:nth-child(2) {
				width: 100%;
			}
		}
	}
</style>
